// 1. 获取dom元素
const table = document.querySelector('.list')
const total = document.querySelector('.total')

// 2.发起渲染数据请求
const getStudentList = async () => {
  const res = await axios({ url: '/students' })
  const htmlData = res.data
    .map((item) => {
      return `<tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender ? '男' : '女'}</td>
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salary}</td>
    <td>${item.province + item.city + item.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3"
        ><i class="bi bi-pen" data-id="${item.id}"></i
      ></a>
      <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${
        item.id
      }"></i></a>
    </td>
  </tr>`
    })
    .join('')
  table.innerHTML = htmlData
  total.innerHTML = res.data.length
}
getStudentList()

// 初始化模态框 & 城市选择
// bootstrap的模态框直接cv即可
const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=area]')

// 获取表单元素
const form = document.querySelector('#form')

// 获取添加按钮
const addBtn = document.querySelector('#openModal')

// 显示modal元素
addBtn.addEventListener('click', function () {
  // 重置表单
  form.reset()
  // 设置自定义属性 add
  modalBox.dataset.id = 'add'
  modalBox.querySelector('.modal-title').innerHTML = '添加学员'
  modal.show()
  // 优化
  cs.innerHTML = '<option value="">--城市--</option>'
  as.innerHTML = '<option value="">--地区--</option>'
})

// 获取提交按钮
const submitBtn = document.querySelector('#submit')

// 渲染省市区
const provinceData = async () => {
  // 获取省信息
  const res = await axios({ url: '/api/province' })
  // 渲染下拉框
  const provinceStr = res.data
    .map((item) => {
      return `<option value="${item}">--${item}--</option>`
    })
    .join('')
  ps.innerHTML = `<option value="">--省份--</option>${provinceStr}`

  // 给省输入框添加change事件
  ps.addEventListener('change', async function () {
    // 优化
    // 重新选择的时候还原默认值
    cs.innerHTML = '<option value="">--城市--</option>'
    as.innerHTML = '<option value="">--地区--</option>'
    // 发起请求获取对应省份的城市的数据
    // 如果省份内容为空则不发送请求
    if (!ps.value) return

    // 获取城市数据
    const res = await axios({
      url: '/api/city',
      params: { pname: ps.value },
    })
    // 渲染下拉框
    const cityStr = res.data
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`

    // 给城市输入框添加change事件
    cs.addEventListener('change', async function () {
      // 优化
      // 重新选择的时候还原默认值
      as.innerHTML = '<option value="">--地区--</option>'

      // 获取城市数据
      const res = await axios({
        url: '/api/area',
        params: { pname: ps.value, cname: cs.value },
      })
      // 渲染下拉框
      const areaStr = res.data
        .map((item) => {
          return `<option value="${item}">--${item}--</option>`
        })
        .join('')
      as.innerHTML = `<option value="">--地区--</option>${areaStr}`
    })
  })
}
provinceData()

// 给提交按钮绑定提交事件
submitBtn.addEventListener('click', async function () {
  // 获取表单数据
  const data = serialize(form, { hash: true })

  // 优化判断非空
  if (!data.name) return alert('姓名不能为空')
  if (!data.age) return alert('年龄不能为空')
  if (!data.hope_salary) return alert('期望薪资不能为空')
  if (!data.salary) return alert('薪资不能为空')
  if (!data.group) return alert('小组不能为空')

  // 数据转换
  data.age = +data.age
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.gender = +data.gender
  data.group = +data.group

  // 判断提交按钮是添加还是修改
  if (modalBox.dataset.id === 'add') {
    // 发起添加请求
    const res = await axios({
      url: '/students',
      method: 'post',
      data,
    })

    // 关闭modal
    modal.hide()
    // 重新渲染页面
    getStudentList()
    // 提示用户已经添加成功
    alert(res.message)
  } else {
    const res = await axios({
      url: '/students/' + modalBox.dataset.id,
      method: 'put',
      data,
    })

    // 关闭modal
    modal.hide()
    // 重新渲染页面
    getStudentList()
    // 提示用户已经修改成功
    alert(res.message)
  }
})

// 事件委托
table.addEventListener('click', async function (e) {
  // 修改学生信息功能
  if (e.target.classList.contains('bi-pen')) {
    // 获取id属性
    const id = e.target.dataset.id

    // 发起获取学生信息请求
    const res = await axios({
      url: '/students/' + id,
      params: id,
    })

    // 获取所有带 name 属性的表单框
    const nodeList = modalBox.querySelectorAll('[name')
    // 遍历添加各项
    nodeList.forEach((item) => {
      console.log(item)
      // 判断男女
      if (item.name === 'gender') {
        res.data[item.name]
          ? (modalBox.querySelector('#cb01').checked = true)
          : (modalBox.querySelector('#cb02').checked = true)
        return
      }
      // 赋值
      item.value = res.data[item.name]
    })

    // 获取城市信息
    const cityData = await axios({
      url: '/api/city',
      params: { pname: res.data.province },
    })
    // 渲染下拉框
    const cityStr = cityData.data
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`
    // 给城市框赋值
    cs.value = res.data.city

    // 获取地区信息
    const areaData = await axios({
      url: '/api/area',
      params: { pname: res.data.province, cname: res.data.city },
    })
    // 渲染下拉框
    const areaStr = areaData.data
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    as.innerHTML = `<option value="">--地区--</option>${areaStr}`
    // 给城市框赋值
    as.value = res.data.area

    // 给modal框添加学生id
    modalBox.dataset.id = id
    modalBox.querySelector('.modal-title').innerHTML = '修改学员信息'

    // 弹出modal元素
    modal.show()
  }
  // 删除学生功能
  if (e.target.classList.contains('bi-trash')) {
    // 获取id属性
    const id = e.target.dataset.id

    // 发起删除学生信息请求
    await axios({
      url: '/students/' + id,
      method: 'delete',
    })
    // 重新渲染页面
    getStudentList()
    // 提示用户已经删除成功
    alert('删除成功')
  }
})
